<script lang="ts" setup>
    import { ref,reactive } from 'vue'

    let name=ref("zs")
    //v-model
    // let ischecked=ref(true)
    // let uername=ref("")
    // let selectOpt=ref("杭州")

    let user=ref({
        ischecked:true,
        uername:"",
        selectOpt:"",
        classSelect:true
    })
    function changeState(){
        if(user.value.ischecked){
            console.log("已勾选")
        }else{
            console.log("未勾选")
        }
    }
    function changeClass(event:Event){
        user.value.classSelect=(event.target as HTMLInputElement).checked
    }
    
    // function changeClass(event:Event){
    //     user.value.classSelect=false
    //     console.log((event.target as HTMLInputElement).checked)
    // }
</script>

<template>

    <h3>{{ name }}</h3>  <!-- a -->
    <input type="checkbox" v-model="user.ischecked" @change="changeState"/>男
    <!-- <input type="checkbox" checked/>男 -->
    <br>
    姓名 <input type="text" v-model="user.uername"/>
    <br>
    城市<select v-model="user.selectOpt">
        <option>杭州</option>
        <option>温州</option>
    </select>

    <!-- <input type="checkbox" :checked="user.classSelect" @change="changeClass"/>班级1 -->
    <input type="checkbox" v-model="user.classSelect"/>班级1
</template>

<style scoped>

</style>
